import { List, InputItem, WhiteSpace, DatePicker, PickerView, Button, WingBlank, Flex, Picker, TextareaItem, Toast } from 'antd-mobile';
import { createForm } from 'rc-form';
import moment from 'moment';
import 'moment/locale/zh-cn';

const Item = List.Item;
const Brief = Item.Brief;

const ItemTypes = [
  {label: '科研', value: '科研', children: [
    { label: '论文、出版物、报告', value: '论文、出版物、报告' }, { label: '项目', value: '项目' }
  ]}, 
  {label: '奖励', value: '奖励'}, 
  {label: '实习', value: '实习'}
];
const ItemTypes2 = [{ label: '论文、出版物、报告', value: '论文、出版物、报告' }, { label: '项目', value: '项目' }]
const ItemLevels = [
  { label: '学校奖励', value: '学校奖励', children: [
    { label: '学院级', value: '学院级' },
    { label: '校级', value: '校级' },
  ] },
  { label: '政府奖励', value: '政府奖励', children: [
    { label: '地市级', value: '地市级' },
    { label: '省部级', value: '省部级' },
    { label: '国家级', value: '国家级' },
  ] },
  { label: '社会组织奖励', value: '社会组织奖励', children: [
    { label: '学会奖励', value: '学会奖励' },
    { label: '其他', value: '其他' },
  ] },
];

class LoginT extends React.Component {

  constructor(props) {
      super(props);

      let items = [];

      if (props.record.xxgzjl) {
        items = props.record.xxgzjl.split('##').map(x => {
          let items = x.split('|');

          return items;
        });
      }

      this.state = {
        items: items,
        xxgzjl: props.record.xxgzjl
      };
  }

	addInput = () =>{
    if (! this.state.input.text) {
      Toast.info("请填写学习或工作内容描述");
    } else {
      this.setState(Object.assign({}, this.state, {
        items: this.state.items.concat(this.state.input),
        input: this.initInput(),
      }), () => {
        //this.props.form.resetFields();
      })
    }
	}

  handleDelete = (index) => {
    console.log("Delete " + index);
    this.setState(Object.assign({}, this.state, {
      items: this.state.items.filter((x, i) => i !== index)
    }));
  }

  updateInput(k, v) {
    let input = Object.assign({}, this.state.input, {[k]: v});

    this.setState(Object.assign({}, this.state, {input}));
  }

  addItem(v) {
    let data = null;
    if (v[0] == '奖励') {
      data = [v[0], '', '', '', ''];
    } else if (v[0] == '实习') {
      data = [v[0], '', '', '', '', ''];
    } else if (v[0] == '科研') {
      if (v[1] == '项目') {
        data = [v[0], v[1], '', '', '', '', ''];
      } else {
        data = [v[0], v[1], '', '', ''];
      }
    }

    if (data) {
      let items = this.state.items.slice();
      items.push(data);

      this.updateItems(items);
    }
  }

  updateItems(items) {
    this.setState({ xxgzjl: items.map(x => x.join("|")).join("##"), items: items });
  }

  updateItem(index1, index2, v) {
    let items = this.state.items.slice();
    items[index1][index2] = v;

    this.updateItems(items);
  }

  removeItem(index) {
    let items = this.state.items.slice();
    items.splice(index, 1);

    this.updateItems(items);
  }

  renderItem(item, index) {
    if (item[0] == '科研') {
      if (item[1] == '项目') {
        return (
          <div>
            <List renderHeader={() => '科研-项目'} key={index}>
              <DatePicker
                mode="date"
                title="开始时间"
                extra="请选择"
                value={item[2] && moment(item[2], 'YYYY-MM-DD')}
                minDate={moment('19700101', 'YYYYMMDD')}
                onChange={(v) => {
                  this.updateItem(index, 2, v.format("YYYY-MM-DD"))
                }}
              >
                <List.Item arrow="horizontal">开始时间</List.Item>
              </DatePicker>

              <DatePicker
                mode="date"
                title="结束时间"
                extra="请选择"
                value={item[3] && moment(item[3], 'YYYY-MM-DD')}
                minDate={moment('19700101', 'YYYYMMDD')}
                onChange={(v) => this.updateItem(index, 3, v.format("YYYY-MM-DD"))}
              >
                <List.Item arrow="horizontal">结束时间</List.Item>
              </DatePicker>

              <InputItem
                placeholder=""
                value={item[4]}
                onChange={(v) => this.updateItem(index, 4, v)}
              >项目名称</InputItem>

              <InputItem
                placeholder=""
                value={item[5]}
                onChange={(v) => this.updateItem(index, 5, v)}
              >研究内容</InputItem>

              <InputItem
                placeholder=""
                value={item[6]}
                onChange={(v) => this.updateItem(index, 6, v)}
              >指导教师</InputItem>

              <List.Item>
                <div
                  style={{ width: '100%', color: '#ff0039', textAlign: 'center' }}
                  onClick={() => this.removeItem(index)}
                >
                  删除
              </div>
              </List.Item>
            </List>
            <WhiteSpace />
          </div>
        );
      } else {
        return (
          <div>
            <List renderHeader={() => '科研-论文、出版物、报告'} key={index}>
              <DatePicker
                mode="date"
                title="发表时间"
                extra="请选择"
                value={item[2] && moment(item[2], 'YYYY-MM-DD')}
                minDate={moment('19700101', 'YYYYMMDD')}
                onChange={(v) => this.updateItem(index, 2, v.format("YYYY-MM-DD"))}
              >
                <List.Item arrow="horizontal">发表时间</List.Item>
              </DatePicker>

              <InputItem
                placeholder=""
                value={item[3]}
                onChange={(v) => this.updateItem(index, 3, v)}
                labelNumber={11}
              >论文、出版物、报告名称</InputItem>

              <InputItem
                placeholder=""
                value={item[4]}
                onChange={(v) => this.updateItem(index, 4, v)}
                labelNumber={8}
              >出版期刊或出版社</InputItem>

              <InputItem
                placeholder=""
                value={item[5]}
                onChange={(v) => this.updateItem(index, 5, v)}
              >作者排序</InputItem>

              <List.Item>
                <div
                  style={{ width: '100%', color: '#ff0039', textAlign: 'center' }}
                  onClick={() => this.removeItem(index)}
                >
                  删除
                </div>
              </List.Item>

            </List>
            <WhiteSpace />
          </div>
        );
      }
    } else if (item[0] == '奖励') {
      return (
        <div>
          <List renderHeader={() => '奖励'} key={index}>
            <DatePicker
              mode="date"
              title="获奖时间"
              extra="请选择"
              value={item[1] && moment(item[1], 'YYYY-MM-DD')}
              minDate={moment('19700101', 'YYYYMMDD')}
              onChange={(v) => this.updateItem(index, 1, v.format("YYYY-MM-DD"))}
            >
              <List.Item arrow="horizontal">获奖时间</List.Item>
            </DatePicker>

            <InputItem
              placeholder=""
              value={item[2]}
              onChange={(v) => this.updateItem(index, 2, v)}
            >奖项名称</InputItem>

            <Picker
              extra="请选择"
              data={ItemLevels}
              title="级别"
              cols={2}
              value={item[3] && item[3].split(",")}
              onChange={v => this.updateItem(index, 3, v.join(","))}
            >
              <List.Item arrow="horizontal">级别</List.Item>
            </Picker>

            <InputItem
              placeholder=""
              value={item[4]}
              onChange={(v) => this.updateItem(index, 4, v)}
              labelNumber={9}
            >
              学院获同类奖励人数
            </InputItem>

            <List.Item>
              <div
                style={{width: '100%', color: '#ff0039', textAlign: 'center' }}
                onClick={() => this.removeItem(index)}
              >
                删除
              </div>
            </List.Item>
          </List>
          <WhiteSpace/>
        </div>
      );
    } else if (item[0] == '实习') {
      return (
        <div>
          <List renderHeader={() => '实习'} key={index}>
            <DatePicker
              mode="date"
              title="开始时间"
              extra="请选择"
              value={item[1] && moment(item[1], 'YYYY-MM-DD')}
              minDate={moment('19700101', 'YYYYMMDD')}
              onChange={(v) => this.updateItem(index, 1, v.format("YYYY-MM-DD"))}
            >
              <List.Item arrow="horizontal">开始时间</List.Item>
            </DatePicker>

            <DatePicker
              mode="date"
              title="结束时间"
              extra="请选择"
              value={item[2] && moment(item[2], 'YYYY-MM-DD')}
              minDate={moment('19700101', 'YYYYMMDD')}
              onChange={(v) => this.updateItem(index, 2, v.format("YYYY-MM-DD"))}
            >
              <List.Item arrow="horizontal">结束时间</List.Item>
            </DatePicker>

            <InputItem
              placeholder=""
              value={item[3]}
              onChange={(v) => this.updateItem(index, 3, v)}
            >工作单位</InputItem>

            <InputItem
              placeholder=""
              value={item[4]}
              onChange={(v) => this.updateItem(index, 4, v)}
            >工作内容</InputItem>

            <InputItem
              placeholder=""
              value={item[5]}
              onChange={(v) => this.updateItem(index, 5, v)}
            >证明人</InputItem>

            <InputItem
              placeholder=""
              value={item[6]}
              onChange={(v) => this.updateItem(index, 6, v)}
            >证明人手机号</InputItem>

            <List.Item>
              <div
                style={{ width: '100%', color: '#ff0039', textAlign: 'center' }}
                onClick={() => this.removeItem(index)}
              >
                删除
              </div>
            </List.Item>
          </List>
          <WhiteSpace />
        </div>
      );
    }
  }

	render = () =>{
    const name = this.props.nodeName;
    
    console.log(this.state.items);

		return(
      <div className={name}>
        <input type="hidden" name="xxgzjl" value={this.state.xxgzjl}/>
        <h2 className="step-title">{this.props.title}</h2>
        <List renderHeader={() => '总共限500字'}></List>
        {this.state.items.map((item, i) => this.renderItem(item, i))}

        <WhiteSpace/>
        <List>
          <Picker
            extra="选择类型"
            data={ItemTypes}
            title="类型"
            cols={2}
            onChange={v => this.addItem(v)}
          >
            <List.Item arrow="horizontal">新增</List.Item>
          </Picker>
        </List>
      </div>
		)
	}

}

const Step5 = createForm()(LoginT);

export default Step5
